<script setup>
import { onUnmounted } from 'vue';
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
let msgList = ref([ //消息列表
    { type: '客服', msg: '您好有什么可以为您服务的？' },
])
let inp = ref('') //输入框绑定
let hasServer = ref(true) //是否有客服
let id = ref(useUserStore().userInfo.id) //id
let ws = new WebSocket(`ws://localhost:8080/ws-server/client/${id.value}`)
ws.onmessage = (e) => { //收消息
    console.log(e);
    let data = JSON.parse(e.data)
    if (data.isNotice) {//无客服
        hasServer.value = false 
    } else {
        msgList.value.push({ type: '客服', msg: data.msg })
    }
}

function sendMSG() { //发送消息
    if (!inp.value) {
        alert('发送的内容不能为空哦')
        return
    }
    let msg = inp.value
    ws.send(JSON.stringify({ identity: 'client', msg, fromOrTo: id.value }))
    msgList.value.push({
        type: '用户',
        msg: inp.value
    })
    inp.value = ''
}

onUnmounted(() => {
    ws.close()
})

</script>
<template>
    <main>
        <div class="left">
        </div>
        <div class="mid">
            <!-- 有客服 -->
            <template v-if="hasServer">
                <!-- 消息项 -->
                <div v-for="(item, index) in msgList" :key="index"
                    :style="{ textAlign: item.type == '用户' ? 'right' : 'left' }" style="margin: 10px 0;">
                    <i class="server" v-if="item.type == '客服'">在线客服</i>
                    <i class="client" v-else>用户{{ id }}号</i>
                    <p style="display: inline-block; padding: 10px;"
                        :style="{ backgroundColor: item.type == '用户' ? '#1ed76d' : '#fff' }">{{ item.msg }}</p>
                </div>
                <!-- 发送框 -->
                <div class="inp_box">
                    <el-input v-model="inp" placeholder="" style="width: 400px;"></el-input>
                    <button @click="sendMSG">发送</button>
                </div>
            </template>
            <!-- 无客服 -->
            <template v-else>
                <h2>
                    不在服务时间，服务时间8-16点
                </h2>
            </template>

        </div>
        <div class="right"></div>
    </main>
</template>
<style scoped lang="less">
main {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    background-color: #f7fafc;
}

.mid {
    i {
        display: block;
    }

    h2 {
        text-align: center;
        transform: translateY(100%);
    }

    .inp_box {
        position: fixed;
        display: flex;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);

        button {
            width: 70px;
            color: #fff;
            background-color: #409eff;
        }
    }


    .server::before {
        content: '\ec2e';
        font-family: "iconfont" !important;
    }

    .client::before {
        content: '\e788';
        font-family: "iconfont" !important;

    }
}

.left {

    background: url(/public/top.jpg) center no-repeat;
    background-size: 100% 100%;
}

.right {

    background: url(/public/bot.jpg) center no-repeat;
    background-size: 100% 100%;
}
</style>